<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="css/style.css" />
      <script src="js/script.js" defer></script>
      <title>Simple Tailwind Starter</title>
   </head>
   <body>
      <section id="hero">
         <div class="container max-w-6xl mx-auto px-6 py-12">
            <!-- Menu/Logo -->
            <nav class="flex items-center justify-between font-bold text-white">
               <!-- Logo -->
               <img src="images/logo.svg" alt="" />
               <!-- Menu -->
               <div class="hidden h-10 font-alata md:flex md:space-x-8">
                  <div class="group">
                     <a href="#">About</a>
                     <div
                        class="mx-2 group-hover:border-b group-hover:border-blue-50"
                     ></div>
                  </div>
                  <div class="group">
                     <a href="#">Careers</a>
                     <div
                        class="mx-2 group-hover:border-b group-hover:border-blue-50"
                     ></div>
                  </div>
                  <div class="group">
                     <a href="#">Events</a>
                     <div
                        class="mx-2 group-hover:border-b group-hover:border-blue-50"
                     ></div>
                  </div>
                  <div class="group">
                     <a href="#">Products</a>
                     <div
                        class="mx-2 group-hover:border-b group-hover:border-blue-50"
                     ></div>
                  </div>
                  <div class="group">
                     <a href="#">Support</a>
                     <div
                        class="mx-2 group-hover:border-b group-hover:border-blue-50"
                     ></div>
                  </div>
               </div>
               <div class="md:hidden">
                  <button id="menu-btn" type="button" class="z-40 block hamburger focus:outline-none">
                    <span class="hamburger-top"></span>
                    <span class="hamburger-middle"></span>
                    <span class="hamburger-bottom"></span>
                  </button>
               </div>
            </nav>
            <div id="menu" class=" z-20 absolute top-0 bottom-0 left-0 flex-col self-end hidden w-full min-h-screen py-1 pt-40 pl-12 space-y-3 text-lg text-white uppercase bg-black">
              <a href="#" class="hover:text-pink-500">About</a>
              <a href="#" class="hover:text-pink-500">Careers</a>
              <a href="#" class="hover:text-pink-500">Events</a>
              <a href="#" class="hover:text-pink-500">Products</a>
              <a href="#" class="hover:text-pink-500">Support</a>


            </div>

            <div
               class="my-32 max-w-lg p-4 border-2 border-slate-300 text-4xl font-sans uppercase text-white md:p-8 md:m-32 md:text-6xl"
            >
               Impressive Experiences That Deliver
            </div>
         </div>
      </section>
      <!-- section-feature -->
      <section id="feature">
         <div
            class="relative flex flex-col container max-w-6xl mx-auto my-32 px-6 .text-gray-900 md:flex-row md:px-0"
         >
            <img src="images/desktop/image-interactive.jpg" alt="" />
            <div class="md:absolute bg-white md:p-10 md:top-32 md:right-0">
               <h2
                  class="font-sans max-w-lg uppercase text-center text-black my-8 mx-auto text-4xl font-light md:mt-0"
               >
                  the leader in interactive vr
               </h2>
               <p class="max-w-md text-center mx-auto md:text-left">
                  Founded in 2011, Loopstudios has been producing world-class
                  virtual reality projects for some of the best companies around
                  the globe. Our award-winning creations have transformed
                  businesses through digital experiences that bind to their
                  brand.
               </p>
            </div>
         </div>
      </section>

      <!-- creation-feature -->
      <section id="creation">
         <div class="container max-w-6xl mx-auto my-32 px-6 text-gray-900">
            <div class="flex justify-center mb-20 md:justify-between">
               <h2
                  class="text-center uppercase text-4xl font-light text-black font-sans"
               >
                  our creations
               </h2>
               <button class="hidden btn md:block">See All</button>
            </div>
            <div class="item-container">
               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-deep-earth.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-deep-earth.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>Deep Eearth</h5>
               </div>
               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-curiosity.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-curiosity.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>Curiosity</h5>
               </div>
               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-fisheye.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-fisheye.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>Fish Eyes</h5>
               </div>
               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-from-above.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-from-above.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>From Above</h5>
               </div>
               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-soccer-team.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-soccer-team.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>Soccer Team</h5>
               </div>

               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-pocket-borealis.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-pocket-borealis.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>Pocket Borealis</h5>
               </div>

               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-night-arcade.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-night-arcade.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>Night Arcade</h5>
               </div>

               <div class="group item">
                  <!-- 移动 -->
                  <img
                     src="images/c/image-grid.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:hidden"
                     alt=""
                  />
                  <!-- 桌面 -->
                  <img
                     src="images/desktop/image-grid.jpg"
                     class="w-fill group-hover:scale-110 duration-200 md:block hidden"
                     alt=""
                  />
                  <!-- 过渡 -->
                  <div class="item-gradiant"></div>

                  <!-- 文字 -->
                  <h5>Grid</h5>
               </div>
            </div>
            <button class="btn w-full md:hidden mt-10 h-12">See All</button>
         </div>
      </section>

      <footer class="bg-black mt-10">
         <div class="container max-w-6xl py-6 mx-auto">
            <div
               class="flex flex-col mb-8 space-y-6 md:flex-row md:space-x-0 md:justify-between md:space-y-0"
            >
               <div
                  class="flex flex-col items-center space-y-8 md:items-start md:space-y-4 md:ml-3"
               >
                  <div class="h-8">
                     <img src="images/logo.svg" alt="" />
                  </div>
                  <div
                     class="flex flex-col space-y-4 items-center text-white md:flex-row md:space-x-4 md:space-y-0"
                  >
                     <div class="h-8 group">
                        <a href="#">About</a>
                        <div
                           class="mx-2 group-hover:border-b group-hover:border-blue-50"
                        ></div>
                     </div>
                     <div class="h-8 group">
                        <a href="#">Careers</a>

                        <div
                           class="mx-2 group-hover:border-b group-hover:border-blue-50"
                        ></div>
                     </div>
                     <div class="h-8 group">
                        <a href="#">Events</a>

                        <div
                           class="mx-2 group-hover:border-b group-hover:border-blue-50"
                        ></div>
                     </div>
                     <div class="h-8 group">
                        <a href="#">Products</a>

                        <div
                           class="mx-2 group-hover:border-b group-hover:border-blue-50"
                        ></div>
                     </div>
                     <div class="h-8 group">
                        <a href="#">Support</a>
                        <div
                           class="mx-2 group-hover:border-b group-hover:border-blue-50"
                        ></div>
                     </div>
                  </div>
               </div>
               <div class="flex flex-col text-gray-500 items-center md:items-end space-y-4">
                  <div class="flex space-x-4">
                     <div class="h-8 group">
                        <a href="#">
                           <img src="images/icon-facebook.svg" alt="" />
                        </a>
                     </div>
                     <div class="h-8 group">
                        <a href="#">
                           <img src="images/icon-instagram.svg" alt="" />
                        </a>
                     </div>
                     <div class="h-8 group">
                        <a href="#">
                           <img src="images/icon-pinterest.svg" alt="" />
                        </a>
                     </div>
                     <div class="h-8 group">
                        <a href="#">
                           <img src="images/icon-twitter.svg" alt="" />
                        </a>
                     </div>
                  </div>
                  <p class=" text-sm text-center">
                     &copy; 2022 Loopstudios. All Rights Reserved
                  </p>
               </div>
            </div>
         </div>
      </footer>
   </body>
</html>
